<template>
  <div>
    <div class="header">
      <span class="iconfont msIcon">&#xe613;</span>
      <span class="overflow">{{ addressName }}</span>
      <span v-if="userInfo.name || userInfo.phone"
        ><i class="iconfont">&#xe608;</i></span
      >
      <span v-else class="userIcon"
        ><a href="#">登录</a> <i>|</i> <a href="#">注册</a></span
      >
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  props: ['addressName'],
  data() {
    return {}
  },
  computed: {
    ...mapState(['userInfo'])
  }
}
</script>

<style lang="less" scoped>
.header {
  height: 0.9rem;
  background-color: #02a774;
  display: flex;
  align-items: center;
  .msIcon {
    font-size: 0.6rem;
    padding-left: 0.06rem;
  }
  span {
    font-size: 0.4rem;
    color: #fff;
    &:last-child {
      position: absolute;
      right: 0.12rem;
      a {
        color: #fff;
      }
    }
    &:nth-child(2) {
      display: inline-block;
      margin: 0 auto;
      width: 3.6rem;
    }
  }
}
</style>
